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Model/View/Controller Roles 


• Model: 

° entity layer 

complete, self-contained representation 
of the data managed by the application 

provides services to manipulate this data 
0 "the back end" 

° main responsibilities 

representation and computation issues 
sometimes persistence 
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MVC Roles 


View: 

° boundary layer 

set of user interface components 

determines what is needed for a 
particular perspective of the data 

□ "the front end" 


° main responsibility 

presentation issues 


MVC Roles 


• Controller: 

° control layer 

handles events and uses appropriate 
information from user interface 
components to modify the model 

° main responsibility 

interaction issues 
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MVC Design Issues 

Swing dependent part: 

° views contain Swing components 
° controllers are Swing listeners 

•Swing independent part: 

° the model should be as Swing free as 
possible 

e.g., not using Swing types in entity 
classes 


"MV" Design 


Generalization: 

° use "model" superclass and "view" 
interface 

all models keep track of their views 

when changed, all models notify their 
views to update 

all views update themselves when notified 

° have application-specific model and 
view classes 


Java Observer 

java.util.Observable superclass 

public class Observable { 

public Observable() { } 

// "all models keep track of their views" 
public void addObserver( Observer o ) { } 

public void deleteObserver( Observer o ) { 

// "all models notify their views to update" 
public void notifyObservers() { } 

public void notifyObservers( Object arg ) { 

// note whether the model has changed 
public boolean hasChanged() { } 

protected void clearChanged() { } 

protected void setChanged() { } 


} 


Java Observer 

java.util.Observer interface 


public interface Observer { 

public void update( Observable 


} 


s. 


Object arg ); 
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Java Observer 

• // MyModel.java 
import j ava.util.*; 

public class MyModel extends Observable { 
private String message; 


public MyModel() { 

message = 

} 

public String getMessage() { 
return message; 

} 

public void setMessage( String message ) { 

this.message = message; 
setChanged(); 

notifyObservers(); // clears changed flag 

} 

} 
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Java Observer 

/ / My Vi ew. j ava 
import java.util.*; 

public class MyView implements Observer { 

public void update( Observable s. Object arg ) { 

System.out.printIn( 

((MyModel) s).getMessage() 

) ; 

} 

} 


Java Observer 

// MyApp.java 
public class MyApp { 

public static void main( String args[] ) { 

MyModel theModel = new MyModel(); 

My View a View = new My View () ; 

MyView anotherView = new MyView () ; 

theModel.addObserver( aView ) ; 
theModel.addObserver( anotherView ); 

theModel.setMessage( "hello" ); 

} 

} 


Observer using Java Generics 

• // TView. java 

public interface TView<M> { 

public void update( M model ); 


} 


Observer using Java Generics 


• // TModel.java 

import java.util.*; 

public class TModel<V extends TView> { 
private ArrayList<V> views; 

public TModel() { 

views = new ArrayList<V>(); 

} 

public void addView( V view ) { 

if (! views.contains( view )) { 

views.add( view ); 

} 

} 


Observer using Java Generics 


public void deleteView ( V view ) { 

views.remove( view ); 

} 

public void notifyViews() { 

for (V view : views) { 
view.update( this ); 

} 

} 


} 


Observer using Java Generics 


// MyView. java 
import java.util.*; 

public class MyView implements TView<MyModel> { 
public void update( MyModel model ) { 

System.out.printIn( model .getMessage() ); 

} 

} 


Observer using Java Generics 


// MyModel.java 

public class MyModel extends TModel<TView> { 

private String message; 

public MyModel() { 

message = 

} 

public String getMessage() { 
return message; 

} 

public void setMessage( String message ) { 

this.message = message; 
notifyViews () ; 

} 

} 


Observer using Java Generics 


// MyApp.java 
public class MyApp { 

public static void main( String args[] ) { 

MyModel theModel = new MyModel(); 

My View a View = new My View () ; 

MyView anotherView = new MyView () ; 

theModel. addView ( aView ) ; 
theModel. addView ( anotherView ) ; 

theModel.setMessage( "hello" ); 


} 


} 


MVC Design 

•Approach: 

° use a framework that supports MVC 
to help structure an interactive 
application 

° framework is a set of cooperating 
classes that forms a reusable design 
in a particular domain 

reusable design and code 


o 
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MVC Framework 


Who is in Control? 


Class library reuse 

° application developers: 

write the main body of the application 
reuse library code by calling it 

Framework reuse 

° application developers: 

reuse the main body of the application 
write code that the framework calls 
reuse library code by calling it 
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Framework 

Separation of concerns: 

° framework 

skeletal application code 
general superclasses and interfaces 

° your "customizations" 

specific subclasses and implementations 



Exercise 

• Design an MVC framework for 
building interactive applications. 


Generic View 

• // TView. java 

public interface TView<M> { 

public void update( M model ); 

} 


Generic Model 


• // TModel.java 


public abstract class TModel<V extends TView> { 
private ArrayList<V> views; 

protected TModel() { 

views = new ArrayList<V>(); 

} 

public void addView( V view ) { 

if (! views.contains( view )) { 

views.add( view ); 

} 

} 


Generic Model 


public void deleteView ( V view ) { 

views.remove( view ); 

} 

public void notifyViews() { 

for (V view : views) { 
view.update( this ); 

} 


} 


} 


General Command 


// TCommand.java 


public class TCommand { 

public void execute( ActionEvent event ) { 

} 

public void execute( ItemEvent event ) { 


} 


} 
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"Code Reuse" 



° http://www.dilbert.com 
/strips/comic/1996-01-31/ 




General Controller 


• // TController.java 


public abstract class TController implements 
ActionListener, ItemListener { 

private JComponent component; 
private TCommand command; 

protected TController( 

JComponent component, TCommand command ) { 


} 


this.component = component; 
this.command = command; 


General Controller 
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public JComponent getComponent() { 

return component; 

} 

public TCommand getCommand() { 
return command; 

} 

public void actionPerformed( 
ActionEvent event ) { 

TCommand command = getCommand(); 
if (command != null) { 

command.execute( event ); 

} 


} 


General Button Controller 


// TButtonController, java 


public class TButtonController extends TController { 

public TButtonController( 

JButton button, TCommand command ) { 

super( button, command ); 
button.addActionListener( this ); 

} 

} 


General Menu Item Controller 


• // TMenuItemController, java 


public class TMenuItemController extends TController 

{ 


public TMenuItemController( 

JMenuItem menultem, TCommand command ) { 

super( menultem, command ); 
menultem.addActionListener( this ); 

} 

} 


Generic Application 

• // TApp.java 


public abstract class TApp<M> { 

private static TApp theApp = null; 

public static TApp getAppO { 
return theApp; 

} 

private M model; 

public M getModel() { 
return model; 


} 


Generic Application 


private JFrame frame; 
private JPanel content; 

public JFrame getFrame() { 
return frame; 

} 

public JPanel getContent() { 
return content; 


} 


Generic Application 


protected TApp( String title, 
if (theApp != null) { 
return; 

} 

theApp = this; 
this.model = model; 
makeWindow( title ); 


M model ) { 


Generic Application 


private void makeWindow( String title ) { 

frame = new JFrame( title ); 

content = new JPanel(); 

frame.setContentPane( content ); 

} 

public void show() { 
frame.pack() ; 
frame.set Visible ( true ); 

} 

public void addToContent( 

JComponent component ) { 

content.add( component ); 


Generic Application 


private JMenuBar menubar = null; 

public void makeMenuBar() { 

menubar = new JMenuBar(); 
frame.setJMenuBar( menubar ); 

} 

public void addToMenuBar ( JMenu menu ) { 

if (menubar == null) { 
return; 

} 

menubar, add ( menu ) ; 

} 

} 


Example Custom Application 



MyApp 
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Custom View 


• // My Label View, java 


public class MyLabelView implements TView<MyModel> 

{ 


private static DecimalFormat twoPlaces = 
new DecimalFormat( "0.00" ); 

private JPanel panel; 
private JLabel labelLabel; 
private JLabel valueLabel; 
private double multiplier; 


Custom View 


[ 
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public MyLabelView( 

String labelText, double multiplier ) { 

panel = new JPanel(); 

labelLabel = new JLabel( labelText ); 
panel.add( labelLabel ); 
valueLabel = new JLabel( " " ); 
panel.add( valueLabel ); 
this.multiplier = multiplier; 

} 

public JComponent getComponent() { 

return panel; 

} 


Custom View 


public void update( MyModel model ) { 

double value = 

model.getValue() * multiplier; 


valueLabel.setText( 

twoPlaces.format( value ) 

) ; 

} 

} 


Custom Model 


• // MyModel.java 

public class MyModel extends TModel<TView> { 
private int value; 

public MyModel() { 

value = 0; 

} 

public int getValue() { 
return value; 

} 

public void setValue( int value ) { 

if (value < 0) { 

value = 0; 

} 

this.value = value; 
notifyViews() ; 

} 

} 


Custom Application 

// MyApp.java 


public class MyApp extends TApp<MyModel> { 
public MyApp( 

String title, MyModel model ) { 


super( title, model ); 

// create the UI 

MyMainView myMainView = 

new MyMainView( this, model ); 
model.addView( myMainView ) ; 


Custom Application 


public static void main( String args[] ) { 

MyModel model = new MyModel(); 

MyApp app = new MyApp( "MyApp", model ); 

model.notifyViews() ; 

app.getContent().setPreferredSize( 
new Dimension( 400, 200 ) 

) ; 

app.show(); 

} 

} 


Custom User Interface 


• // MyMa in View, java 


public class MyMainView implements TView<MyModel> { 

private MyLabelView kmView; 
private MyLabelView milesView; 

private TCommand incrCommand; 
private TCommand deerCommand; 

private JMenu menu; 

private JMenuItem incrMenuItem; 
private JMenuItem decrMenuItem; 

private JButton incrButton; 
private JButton decrButton; 


Custom User Interface 


public MyMainView( 

MyApp app, final MyModel model ) { 

// create views 

kmView = new My Label View ( 

"km: ", 1.0 

); 

milesView = new MyLabelView( 
"miles: ", 0.621371192 

) ; 


// register views with model 
model.addView( kmView ) ; 
model.addView( milesView ) ; 


Custom User Interface 


// create commands that modify the model 
incrCommand = new TCommand() { 
public void execute( 

ActionEvent event ) { 

model.setValue( 

model.getValue() +1 

); 

} 

} ; 

decrCommand = new TCommand() { 
public void execute( 

ActionEvent event ) { 

model.setValue( 

model.getValue() - 1 

); 


}; 


} 


Custom User Interface 

• // views 

app. addToContent ( kmView. get Component () ) ; 
app. addToContent ( milesView. getComponent () ) ; 

// controls 

incrButton = new JButton( "+ 1 km" ); 
app.addToContent( incrButton ); 

decrButton = new JButton( 1 km" ); 

app.addToContent( decrButton ); 

// associate components to commands 
new TMenuItemController( 

incrMenuItem, incrCommand ); 
new TMenuItemController( 

decrMenuItem, decrCommand ); 
new TButtonController( 

incrButton, incrCommand ); 
new TButtonController( 

decrButton, decrCommand ); 


) 


Custom User Interface 



public void update( MyModel model ) { 

// nothing to do 

} 


Exercise 


• Draw a UML sequence diagram 
for the behavior when a button is 
clicked in the example 
application. 
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MovieCat Movie Catalog Application 
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MovieCat Movie Catalog Application 
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JPanel, JList 
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Edit Movie 
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Name 

My Movies, movies 


Date Modified 


Tuesday, May 8, 2001 12:50 PM 
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Main Window 


Typical containment setup steps 

° create a JFrame 

create and define a JMenuBar (optional) 

add this JMenuBar to the JFrame 
(optional) 

° create a JPanel 

add components to this JPanel 

set JFrame content pane to this JPanel 

pack and show the JFrame 


o 














• // MyApp.java 


import javax.swing.*; 
public class MyApp { 

public static void main( String args[] ) { 

JFrame theFrame = new JFrame( "Title" ); 

JMenuBar theMenuBar = new JMenuBar(); 

// code to define menu items, etc. 

theFrame.setJMenuBar( theMenuBar ); 

JPanel thePanel = new JPanel(); 

// code to define components in the panel, 
// layout manager, etc. 

JButton aButton = new JButton( "Hello" ); 
thePanel.add( aButton ); 

theFrame.setContentPane( thePanel ); 

theFrame.pack(); 

theFrame.setVisible( true ); 

} 

} 


OQO Title 

QED 





Menu Construction 


// code to define menu items, etc. 

JMenu fileMenu = new JMenu( "File" ); 

JMenuItem newMenuItem = new JMenuItem( "New"); 
JMenuItem openMenuItem = new JMenuItem( "Open"); 
fileMenu.add( newMenuItem ); 
fileMenu.add( openMenuItem ); 
theMenuBar.add( fileMenu ); 

JMenu editMenu = new JMenu( "Edit" ); 

••• 

theMenuBar.add( editMenu ); 


^ ^ ^ Title 
File Edit 
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Events 


•Interactive applications are event driven: 

° receive an event (e.g., initiated from user) 

° check event and system state 
° respond by changing state and display 
° return and wait for another event 

•Event handling is done via: 

° explicit event loop, event queue, and dispatcher 
° registered callback through listeners 
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Events 


•Interactive applications are event driven: 

° receive an event (e.g., initiated from user) 

° check event and system state 
° respond by changing state and display 
° return and wait for another event 

•Event handling is done via: 

° explicit event loop, event queue, and dispatcher 
° registered callback through listeners 


Event Handling 


• // MyListener.java 

public class MyListener implements ActionListener { 

••• 

public void actionPerformed( ActionEvent e ) { 

// react to event 


} 


} 


Event Handling 


• // MyListener.java 

public class MyListener implements ActionListener { 

••• 

public void actionPerformed( ActionEvent e ) { 

// react to event 


} 


} 
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Implementing a Listener 

// My View, java 

class MyListener implements ActionListener { 

public void actionPerformed( ActionEvent e ) { 


} 


} 


public class MyView { 

public MyView() { 

button.addActionListener( 
new MyListener(); 

); 


} 


} 


Implementing a Listener 

• // MyView.java 

class MyListener implements ActionListener { 

public void actionPerformed( ActionEvent e ) { 

} 

} 

public class MyView { 
public MyView() { 

button.addActionListener( 
new MyListener(); 

); 


} 


} 


Implementing a Listener 

• // MyView.java 

class MyListener implements ActionListener { 

public void actionPerformed( ActionEvent e ) { 

} 

} 

public class MyView { 
public MyView() { 

button.addActionListener( 
new MyListener(); 

); 


} 


} 


Implementing a Listener 

• // MyView.java 

class MyListener implements ActionListener { 

public void actionPerformed( ActionEvent e ) { 

} 

} 

public class MyView { 
public MyView() { 

button.addActionListener( 
new MyListener(); 

); 


} 


} 


Implementing a Listener 


// without adapter class 


public class MyWindowHandler implements WindowListener { 
public void windowclosing( WindowEvent e ) { 

// respond to closing window 


} 


} 

public 

public 

public 

public 

public 

public 


void windowOpened( WindowEvent e ) {} 

void windowClosed( WindowEvent e ) {} 

void windowlconfied( WindowEvent e ) {} 

void windowDeiconified( WindowEvent e ) {} 

void windowActivated( WindowEvent e ) {} 

void windowDeactivated( WindowEvent e ) {} 


theFrame.addWindowListener( new MyWindowHandler() ); 
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Implementing a Listener 

// My View, java 

class MyListener implements ActionListener { 

public void actionPerformed( ActionEvent e ) { 


} 


} 


public class MyView { 

public MyView() { 

button.addActionListener( 
new MyListener(); 

); 


} 


} 


Implementing a Listener 

• // MyView.java 

class MyListener implements ActionListener { 

public void actionPerformed( ActionEvent e ) { 

} 

} 

public class MyView { 
public MyView() { 

button.addActionListener( 
new MyListener(); 

); 


} 


} 


More Information 


Books: 

° The Essence of Object-Oriented 
Programming with Java and UML 

0 B. Wampler 
Addison-Wesley, 2002 

° Java in a Nutshell 

D. Flanagan 
□ O'Reilly, 2005 


More Information 


Books: 

° Core Java 2: Fundamentals 

C. Horstmann 
Prentice-Hall, 2004 

° Learning Java 

P. Niemeyer and J. Knudsen 
0 O'Reilly, 2005 


More Information 


Books: 

° UML Distilled 

□ M. Fowler 
Addison-Wesley, 2003 

° The Elements of UML 2.0 Style 

0 S. W. Ambler 
Cambridge, 2005 


More Information 

• Links: 

° The Swing Tutorial 

0 http://download.oracle.com/iavase 

/tutorial/uiswina/ 

° Java Standard Edition 6 API 
Specification 

0 http://download.oracle.com/iavase 

/6/docs/api/ 






More Information 


•Links: 

° Java SE Application Design with MVC 

n http://www.oracle.com/technetwork/articles/ 

javase/index-142890.html 

° How to Use Model-View-Controller 

□ http://st-www.cs.illinois.edu/users/smarch/st 

-docs/mvc.html 

° A Generic MVC Model in Java 

D http://oniava.eom/pub/a/oniava/2004/07/07/ 

aenericmvc.html 








